<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="mw100 fm5">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<graceHeader>
				<view class="grace-header-body" style="padding:0 20rpx;">
					<graceNavBar
						:items="tabs"
						:animatie="true"
						lineHeight="70rpx"
						textAlign="left"
						:isCenter="false"
						activeDirection="left"
						activeColor="#1E9FFF"
						activeLineHeight="4rpx"
						activeLineWidth="64rpx"
						activeFontSize="36rpx"
						:currentIndex="currentIndex"
						@change="navChange"
					></graceNavBar>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex"><graceSearch  :disabled="true" @tapme="tapme"></graceSearch></view>
					<!-- 设置按钮 -->
					<view class="grace-header-icons  grace-black6 fz18 pr" @tap="set">
						<text class="grace-icons icon-comments"></text>
						<text class="ksd-icon-dot iconfont icon-dot grace-red fz18"></text>
					</view>
				</view>
			</graceHeader>

			<view class="grace-body grace-animate slideInLeft" v-show="currentIndex==0">
				<graceSwiper
					:width="715"
					:currentIndex="1"
					:spacing="0"
					:padding="0"
					:swiperItems="swiperItems"
					:height="325"
					indicatorType="dot"
					@taped="taped"
					indicatorBarBgColor="rgba(0,0,0, 0.2)"
				></graceSwiper>
			</view>
			
			<view class="grace-img-card grace-body mt10 grace-animate slideInLeft" v-show="currentIndex==0">
				<view class="grace-img-card-item" @click="godetail(index)" v-for="(news, index) in newlist" :key="index">
					<view class="grace-img-card-img">
						<image :src="'https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/' + (news%4 + 1) + '.png'" class="grace-img-card-img"></image>
						<view class="count">
							<text>
								<text class="iconfont icon-play-square  fz14 pr3 pr tp1"></text>
								43.7万
							</text>
							<text>
								<text class="iconfont icon-liulan fz16 pr3 pr tp1"></text>
								6056
							</text>
						</view>
					</view>
					<text class="title">{{ index + 1 }}:美国新冠疫苗已经开打！街访纽约路人会打吗？</text>
				</view>
			</view>
			
			<!--java系列课程-->
			<view class="grace-img-card-box"  v-show="currentIndex==1">
				<view class="grace-img-card-box-c" v-for="(cate,index) in categoryList">
					<view class="grace-img-card grace-body fm5 grace-img-card-title fw fz16">第{{cate}}阶段：JavaSE</view>
					<view class="grace-img-card grace-body mt10 grace-animate slideInDown">
						<view class="grace-img-card-item" @click="godetail(index)" v-for="(news, index) in newlist1" :key="index">
							<view class="grace-img-card-img">
								<image :src="'https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/' + news + '.png'" class="grace-img-card-img"></image>
								<!-- <text class="grace-tags grace-gtbg-blue grace-absolute-lt">标签</text> -->
								<view class="count">
									<text>
										<text class="iconfont icon-play-square  fz14 pr3 pr tp1"></text>
										43.7万
									</text>
									<text>
										<text class="iconfont icon-liulan fz16 pr3 pr tp1"></text>
										6056
									</text>
								</view>
							</view>
							<text class="title">{{ index + 1 }}:美国新冠疫苗已经开打！街访纽约路人会打吗？</text>
						</view>
					</view>
				</view>
			</view>
			<!--java进阶课-->
			<view class="grace-img-card-box"  v-show="currentIndex==2">
				<view class="grace-img-card-box-c" v-for="(cate,index) in categoryList">
					<view class="grace-img-card grace-body fm5 grace-img-card-title fw fz16">第{{cate}}阶段：JavaSE</view>
					<view class="grace-img-card grace-body mt10 grace-animate slideInRight">
						<view class="grace-img-card-item" @click="godetail(index)" v-for="(news, index) in newlist2" :key="index">
							<view class="grace-img-card-img">
								<image :src="'https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/' + news + '.png'" class="grace-img-card-img"></image>
								<!-- <text class="grace-tags grace-gtbg-blue grace-absolute-lt">标签</text> -->
								<view class="count">
									<text>
										<text class="iconfont icon-play-square  fz14 pr3"></text>
										43.7万
									</text>
									<text>
										<text class="iconfont icon-gaojingguanlilook fz14 pr3"></text>
										6056
									</text>
								</view>
							</view>
							<text class="title">{{ index + 1 }}:美国新冠疫苗已经开打！街访纽约路人会打吗？</text>
						</view>
					</view>
				</view>
			</view>
			
			<graceEmptyNew v-if="newlist.length == 0">
				<view slot="img" class="empty-view">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="empty-img" style="width: 240rpx;" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
				</view>
				<text slot="text" class="grace-text-small grace-gray">抱歉，没有搜索到任何数据</text>
			</graceEmptyNew>
		
			<!-- 弹出层选择 -->
			<graceShade ref="graceShade" class="mt50">
				<scroll-view scroll-y class="taglist" @tap.stop="hideTags">
					<view class="grace-space-between">
						<view class="taglist-title">全部分类	</view>
						<view class="taglist-close grace-icons">&#xe7a5;</view>
					</view>
					<view class="grace-wrap">
						<view class="taglist-items" v-for="(item,index) in catesAll" :key="index" 
						@tap="gotocate(item,index)">{{item}}</view>
					</view>
				</scroll-view>
			</graceShade>	
		
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceShade from "../../graceUI/components/graceShade.vue";
import graceEmptyNew from "../../graceUI/components/graceEmptyNew.vue";
export default {
	data() {
		return {
			// #ifdef MP
			customHeader : false,
			// #endif
			// #ifndef MP
			customHeader : true,
			// #endif
			currentIndex: 0,
			tabs: ['推荐', 'Java', '更多'],
			catesAll : ['推荐', '新闻', '音乐', '运动', '军事', '视频', '地方', '戏曲', '汽车', '活动', '其他'],
			newlist: [1, 2, 3, 4,5,6,7,8,9,10,1, 2, 3, 4,5,6,7,8,9,10],
			newlist1: [1, 2, 3, 4],
			newlist2: [1, 2, 3, 4],
			categoryList: [1, 2, 3, 4,5,6,7,8,9,10],
			swiperItems: [
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/1.png',
					url: '',
					title: '测试标题 001',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
					url: '',
					title: '测试标题 02',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/3.png',
					url: '',
					title: '测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/4.png',
					url: '',
					title: '测试标题04',
					opentype: 'navigate'
				},
				{
					img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/5.png',
					url: '',
					title: '测试标题05',
					opentype: 'navigate'
				}
			]
		};
	},
	onPullDownRefresh(){
		setTimeout(()=>{
			uni.stopPullDownRefresh();
		},1000);
	},
	methods: {
		navChange: function(e) {
			this.currentIndex = e;
			if(e == 2){
				this.openTags();
			}else{
				this.hideTags();
			}
		},
		goback: function() {
			uni.showToast({ title: '您点击了返回按钮', icon: 'none' });
			uni.navigateBack({});
		},
		set: function() {
			uni.navigateTo({
				url: '../msg/msg',
			});
		},
		swipernavChange: function(e) {
			var index = e.detail.current;
			this.currentIndex = index;
		},
		swiperchange: function(e) {
			console.log(e);
		},
		taped: function(e) {
			uni.showToast({
				title: '您点击了第 ' + e + ' 个项目',
				icon: 'none'
			});
		},
		tapme:function(){
			uni.navigateTo({
				url: '../search/search'
			});
		},
		godetail(index) {
			uni.navigateTo({
				url: '../course/play/play?opid=' + index
			});
		},
		openTags : function(){this.$refs.graceShade.showIt();},
		hideTags : function(){
			this.$refs.graceShade.hideIt();
		},
	},
	components: { gracePage, graceNavBar,graceShade,graceEmptyNew}
};
</script>
<style>
/* 请根据项目来规划自己的图片大小，请对图片进行等比缩放 */
.grace-news-img {
	width: 220rpx;
	height: 150rpx;
}
.big-img {
	width: 700rpx;
	height: 388rpx;
	overflow: hidden;
	margin: 15rpx 0;
}
.big-image {
	width: 700rpx;
	height: 388rpx;
	border-radius: 6rpx;
}
.grace-news-imgs-img {
	width: 225rpx;
}

.grace-img-card-title{
	background:#f8f8f8;
	padding:5px 10px;
}

.title-article .title-msg {
	margin-bottom: 10px;
	font-size: 12px;
}

.ksd-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	vertical-align: initial;
	top: 2px;
	position: relative;
}

.tag {
	height: 25px;
	margin: 1px 1px 1px 0;
	padding: 4px 10px;
	font-size: 12px;
	color: #fff;
	border-radius: 12px;
	line-height: 26px;
	background: var(--main-bg-color);
}

.grace-img-card-item .title {
	font-size: 24rpx;
	color: #212121;
	margin-top: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.count {
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 16px);
	font-size: 12px;
	padding: 6px 8px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	color: #fff;
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.85)), to(transparent));
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
}

.gui-search{width: 280rpx!important;}
.taglist{width:750rpx; height:100vh; background-color:#F6F7F8; padding:30rpx; box-sizing:border-box;}
.taglist-title{width:600rpx; font-size:36rpx; font-weight:bold; line-height:100rpx;}
.taglist-close{width:80rpx; font-size:32rpx; text-align:right; line-height:100rpx;}
.taglist-items{width:152rpx; margin:10rpx; height:88rpx; background-color:#FFFFFF; font-size:30rpx; line-height:88rpx; border-radius:10rpx; text-align:center;}
</style>